<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>Madhouse|monitor core</title>
<link rel="stylesheet" href="../assets/css/bootstrap-spacelab.css" />
<link rel="stylesheet" href="../assets/css/base.css?t=20130516173114" />
<link rel="stylesheet" href="../assets/css/validationEngine.jquery.css" type="text/css"/>
  <!-- template
    ================================================== -->
    <script id="t_a" type="text/html">
    	<% var json = json || {};%>
				<form class="form-horizontal" id="form" onsubmit="return false;">
					 <fieldset>
					 	<br />
                        <div class="control-group">
                            <label class="control-label" for="name"> 用户名： </label>
                            <div class="controls">
                                <input type="text" class="validate[required,custom[onlyLetterNumber]] text-input"  name="name" value="<%= json.name || '' %>" <%= json.name && 'readonly' %> >
                                <p class="help-block">格式：数字，字母，下划线或者中划线（用户名不能含有中文）</p>
                            </div>
                        </div>
						
                        <div class="control-group">
                            <label class="control-label" for="desc"> 描述：</label>
                            <div class="controls">
                                <textarea name="desc" id="desc" rows="3"  value="<%= json.desc || '' %>" ><%= json.desc || '' %></textarea>
								<p class="help-block">可选的描述</p>
                            </div>
                        </div>					
																													
                        <div class="form-actions">
                            <button class='btn btn-info' name="submit"> 保存 </button>
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							<button class='btn' name="return"> 返回 </button>
                            <input type="reset" style="display:none;">
                        </div>
				</fieldset>
			</form>
			
    </script>
	
    <!-- template
    ================================================== -->
    <script id="t_b" type="text/html">
        <form class="form-horizontal" onsubmit="return false;">
            <fieldset>
                <br/>
                <table class="table table-striped table-bordered table-condensed">
                    <tbody>
                        <% for (var i in json) {
                        	var arr = json[i] || {},
								arr2 = arr[1].split('|'),
								sel = arr[2],
								q;
                         %>
                        <tr>
                            <td>
                                <div class="control-group">
                                    <label class="control-label" for="<%= i %>">
                                        	<%= arr[0] %>：
                                    </label>
                                    <div class="controls">
                                        <select name="<%= i %>">
                                        	<% for (var j in arr2) {
												q = arr2[j];
												if(q == 1){ %>
                                            		<option value="1" <%= sel == 1 && 'selected' %> >无权限</option>
												<% }else if(q == 2){ %>
                                            		<option value="2" <%= sel == 2 && 'selected' %> >读取</option>
												<% }else if(q == 3){ %>
                                            		<option value="3" <%= sel == 3 && 'selected' %> >读取创建</option>
												<% }else if(q == 4){ %>
                                            		<option value="4" <%= sel == 4 && 'selected' %> >读取修改</option>
												<% }else if(q == 5){ %>
                                            		<option value="5" <%= sel == 5 && 'selected' %> >读取创建修改</option>
												<% }else if(q == 6){ %>
                                            		<option value="6" <%= sel == 6 && 'selected' %> >读取创建修改删除</option>
											 	<% } %>
										   <% } %>
                                        </select>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <% } %>
                    </tbody>
                </table>
            </fieldset>
        </form>
    </script>	

<!-- template
    ================================================== -->
    <script id="t_c" type="text/html">
        <table class="table table-striped table-bordered table-condensed">
            <thead>
                <tr>
					<th> 用户名 </th>
                    <th> 描述 </th>
					<th> 是否隶属此组 </th>
                    <th> 操作 </th>					
                </tr>
            </thead>
            <tbody>
                <%	var json = json || {};
				  	var ischecked = ischecked || {};	
				 	for (var i in json) {
                		var item = json[i] || [];
					 %>
                <tr>
                    <td>
                        <%= i %>
                    </td>
                    <td>
                        <%= item[2] %>
                    </td>
                    <td>
						<i class="<%= ischecked[i] ? 'icon-ok' : '' %>"></i>
						<label class="checkbox inline" style="display:none;">
                            <input type="checkbox" name='member' value="<%= i %>" <%= ischecked[i] ? 'checked' : '' %> />
                    	</label>
                    </td>					
                    <td>
                        <button class="btn" name="switch" data-mark="<%= ischecked[i] ? 1 : 0 %>" title="<%= ischecked[i] ? '从该组移除' : '添加到该组' %>">
                        	<i class="<%= ischecked[i] ? 'icon-minus' : 'icon-plus' %>"></i>
						</button>
                    </td>  					
                </tr>
                <% } %>
            </tbody>
        </table>
				
    </script>		
<style>
	
#groupAuthority .form-horizontal .control-label{
	width:180px;
}
#groupAuthority .form-horizontal .controls{
	margin-left:240px;
}
#groupAuthority .form-horizontal .control-group{
	margin:5px 0 05px 0;
}
</style>

</head>
<body>
    <header>
        <h1><span id="title">修改用户组&nbsp;&nbsp;&gt;&gt;&nbsp;&nbsp;</span> <span id="userGroupName"></span></h1>
        <div class="row" id="toolbar">
                <div class="box_1">
                    <button class="btn" id="info">
                        <i class="icon-info-sign"></i> 信息
                    </button>					
                </div>
				
                <div class="btn-group" style="display:none;">
                    <button class="btn">
                        	操作
                    </button>
                    <button class="btn dropdown-toggle" data-toggle="dropdown">
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li><a href="#" id="notification"></a></li>
                    </ul>
                </div>
        </div>
    </header>	
	
    <div id="mainbody">
        <div class="tabbable">
            <ul class="nav nav-tabs">
                <li class="active">
                    <a href="#user_group_form" data-toggle="tab">基本信息</a>
                </li>
                <li>
                    <a href="#groupAuthority" data-toggle="tab">组权限</a>
                </li>
                <li>
                    <a href="#allmember" data-toggle="tab">成员用户</a>
                </li>								
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="user_group_form">
                </div>
                <div class="tab-pane" id="groupAuthority">
                </div>
                <div class="tab-pane" id="allmember">
                </div>								
            </div>
        </div>    	
    </div>
	

  <!-- 弹出对话框
    ================================================== -->
<div class="modal fade" id="modal">
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>OK</h3>
  </div>
  <div class="modal-body">
  	
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" name="return">返回</a>
    <a href="#" class="btn btn-info" id="nextEdit">继续修改</a>
  </div>
</div>


  <!-- js part
    ================================================== -->
<script src="../assets/js/library/jquery-1.7.1.js"></script>
<script src="../assets/js/library/bootstrap.min.js"></script>
<script src="../assets/js/library/template.js"></script>
<script src="../assets/js/library/jquery.validationEngine-en.js"></script>
<script src="../assets/js/library/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
<script src="../assets/js/helper.js?t=20130516173114"></script>
<script src="../assets/js/doc.js?t=20130516173114"></script>	
<script>
$(function(){
	
	var smartMad = window.smartMad = window.smartMad || {};
	
	var userGroupName = urlParams('name') || '';
	
	////////////////////////////////////////////////////
	//常规选项设置
	////////////////////////////////////////////////////
	var allmemberConf = {
		url: smartMad._url + smartMad.api.getUserAllmember
	};
	
	var userGroupFormConf = {
		url: smartMad._url + smartMad.api.getUserGroup + userGroupName
	};	
	
	var allmemberCall = function(e,json){
		var $th = $(this), data, html;
		var ischecked = {};
		var groupMember = smartMad.groupMember || {};		
		
		//$th.html(JSON.stringify(json));return;
        ///////////////////////////////////////////////

		for(var i in groupMember ){
			ischecked[i] = 1;
		}
		
		///////////////////////////////////////////////
		
        data = {
            json: json,
			ischecked: ischecked
        };
        
        ///////////////////////////////////////////////
        
        html = template('t_c', data);
        $th.html(html);	
		
		///////////////////////////////////////////////
		
		$th.find('table').delegate('button[name="switch"]','click',function(){
			var $th = $(this);
			var mark = $th.attr('data-mark') * 1;
			if(mark){
				$th.find('i').removeClass('icon-minus').addClass('icon-plus');
				//$th.find('span').html('添加到该组');
				$th.parent().prev().find('i').toggleClass('icon-ok').end().find(':checkbox').attr('checked',false);
				$th.attr('data-mark',0).attr('title','添加到该组');
			}else{
				$th.find('i').removeClass('icon-plus').addClass('icon-minus');
				//$th.find('span').html('从该组移除');
				$th.parent().prev().find('i').toggleClass('icon-ok').end().find(':checkbox').attr('checked',true);				
				$th.attr('data-mark',1).attr('title','从该组移除');
			}
			
		});	
	};
		
	var userGroupFormCall = function(e,json){
		var $th = $(this), data, html;
		
		//$th.html(JSON.stringify(json));return;
		//$('#groupAuthority').html(JSON.stringify(json[1]));return;
        ///////////////////////////////////////////////
		
		smartMad.groupAuthority = json[1]; 
		userGroupName && (smartMad.groupMember = json[2]);
		
		///////////////////////////////////////////////
        data = {
            json: {
				name : userGroupName,
				desc : userGroupName ? json[0] : ''
			}
        };
        
        html = template('t_a', data);
        $th.html(html);
		
		///////////////////////////////////////////////
		
        data = {
            json: json[1] || []
        };	
		html = template('t_b', data);			
		$('#groupAuthority').html(html);
		
		///////////////////////////////////////////////
		//表单验证
		$('#form').validationEngine();
		
		///////////////////////////////////////////////
		$('#allmember').bind('ajax.success', allmemberCall).getData(allmemberConf);
			
		
	};	
	
	
	////////////////////////////////////////////////////////
	//提交保存
	////////////////////////////////////////////////////////
    $('#mainbody').delegate('button[name="submit"]', 'click', function(){
		//表单验证
		if(!$('#form').validationEngine('validate')){
			return;
		}
		
        var conf = {};
		var data = {};
		var privilege = '';
		var member = ''; 
		var groupAuthority = smartMad.groupAuthority;
        
        var name = $('#user_group_form input[name="name"]').val(),
			desc = $("#user_group_form textarea[name='desc']").val();
        
		for(var i in groupAuthority){
			privilege += '|' + i + '#' + $('select[name="' + i + '"]').val();
		}
		
		$('#allmember [name="member"]:checked').each(function(i){
			member += i != 0 ? '|' + $(this).val() : $(this).val();
		});
		
		data.desc = desc;
		data.privilege = privilege.substring(1);
		data.member = member;
		
		conf.data = data;
		
		//判断是修改还是创建
        if (userGroupName) {
            conf.url = smartMad._url + smartMad.api.updateUserGroup + userGroupName;
        }
        else {
            conf.success = function(){
                $('#modal').modal('show').find('.modal-body').html('添加成功!');
            };
            conf.url = smartMad._url + smartMad.api.createUserGroup + name;
			smartMad.userGroupName = $('#user_group_form input[name="name"]').val();
        }
		
		//console.log(JSON.stringify(conf));
        $(this).postData(conf);
    });
	
	/////////////////////////////////////////////////////
	
	$('body')
	.delegate('[name="return"]', 'click', function(){
	    location.href = 'usergroupManager.html?version=' + smartMad.version;
	 })
	 .delegate('#nextEdit','click',function(){
	 	location.href = 'editUserGroup.html?name=' + smartMad.userGroupName + '&version=' + smartMad.version;
	 });
	 
    
	////////////////////////////////////////////////////////
	//init
	////////////////////////////////////////////////////////
	
    if (userGroupName) {
        $('#userGroupName').text(userGroupName);
    }else{
		 $('#title').text('添加新用户组');
	}
	
	$('#user_group_form').bind('ajax.success', userGroupFormCall).getData(userGroupFormConf);

});
</script>
</body>
</html>
